<template>
    <section id="server-manager">

        <el-form :inline="true" :model="filters" size="mini">
            <el-form-item>
                <el-input v-model="filters.ip" placeholder="请输入查询ip"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getAssetByIp" >查询</el-button>
            </el-form-item>

        </el-form>



    <el-table
            v-if="tableView"
            highlight-current-row
            :data="assets"
            border
            max-height="800"
           >
        <el-table-column
                sortable
                prop="ip"
                label="内网IP"
                width="150">
        </el-table-column>
        <el-table-column
                prop="hostname"
                label="主机名称"
                width="120">
        </el-table-column>
        <el-table-column
                prop="system"
                label="系统"
                width="150">
        </el-table-column>
        <el-table-column
                prop="cpuinfo"
                label="Cpu（核数-信息）"
                width="400">
            <template slot-scope="scope">

                <!--<div v-for="item in scope.row.items.split(' ')"><el-tag type="default" size="mini">{{item}}</el-tag></div>-->
                <el-tag size="mini" type="danger">{{scope.row.cpuinfo.split(' ')[0]}}</el-tag>{{ scope.row.cpuinfo.split(' ').slice(1,scope.row.cpuinfo.split(' ').length).join(" ")}}

            </template>

        </el-table-column>
        <el-table-column
                prop="memoryinfo"
                label="内存"
                width="100">
        </el-table-column>
        <el-table-column
                prop="diskinfo"
                label="磁盘"
                width="100">
        </el-table-column>
        <el-table-column

                label="部署项目"
                width="150">
            <template slot-scope="scope">

                    <div v-for="item in scope.row.items.split(' ')"><el-tag type="default" size="mini">{{item}}</el-tag></div>

            </template>

        </el-table-column>
        <el-table-column

                label="状态"
                width="120">
            <template slot-scope="scope">
                <!--{{scope.row.status}}-->

                <el-tag size="mini" type="success" v-if="scope.row.status==='在线'">{{scope.row.status}}</el-tag>
                <el-tag size="mini" type="warning" v-else>{{scope.row.status}}</el-tag>

            </template>


        </el-table-column>
        <el-table-column

                label="操作"
                fit>
            <template slot-scope="scope">
                <el-button  type="text" size="small">ping</el-button>
                <el-button @click="handleConsole(scope.row)" type="text" size="small">连接</el-button>
                <el-button type="text" size="small">诊断</el-button>
                <el-button type="text" size="small" style="color: green" @click="linkToMonitor(scope.row)">监控面板</el-button>

            </template>
        </el-table-column>
    </el-table>
    </section>
</template>

<script>
    import { getAssetList } from '../../api/api'

    export default {
        data() {
            return {
                filters: {
                    ip: ''
                },
                assets: [
                ],
                filterAssets: [],
                tableView:false,
            }
        },
        methods: {
            handleConsole(row) {
                //alert(row.ipAddress)
                let consoleUrl = this.$router.resolve({
                    path: "/shell/" + row.ip
                });
                window.open(consoleUrl .href, '_blank');
            },
            linkToMonitor(row){
                this.$router.push('/monitor/servers?host=' + row.ip)
            },

            getAssets(){
                getAssetList().then((res) => {
                        this.assets = res.data.assets
                        this.tableView = true
                    }
                )
            },
            getAssetByIp() {
                let self = this
                if (self.filters.ip.trim() === ""){
                    return
                }
                self.assets  = self.assets.filter( function (value) {
                        return value.ip === self.filters.ip
                    }
                )
            }
        },
        mounted() {
            this.getAssets();
        },

    }
</script>
<style>
    #server-manager .toolbar {
        height: 50px;
    }
</style>